<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询学生申请</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>
    <style>
        /*设置背景*/
        body{
            background-color: #eff6f6;
        }
        .td_left{
            width: 100px;
            height:20px;
            text-align: right;
            padding-top: 10px;
        }
        /*表格样式*/
        #tab_three_table{
            width: 1000px;
            font-size: 15px;
            margin: auto;
            margin-top: 40px;
        }
        tr{
            height: 50px;
        }
    </style>
    <script>
        //正则表达式
        //楼栋号
        function checkBuilding() {
            var building = $("#building").val();
            var reg = /^\d{1,3}$/;
            return reg.test(building);
        }
        //房间号
        function checkRoom() {
            var room = $("#room").val();
            var reg = /^\d{1,3}$/;
            return reg.test(room);
        }
        //床号号
        function checkBed() {
            var bed = $("#bed").val();
            var reg = /^\d{1,2}$/;
            return reg.test(bed);
        }
        $(function () {
            var str = "";
            //查询学生调换宿舍的申请
            $.get("tea/queryApply",{},function (data) {

                str += '<tr class="info">\n' +
                    '            <th>学号</th>\n' +
                    '            <th>楼栋号</th>\n' +
                    '            <th>房间号</th>\n' +
                    '            <th>床号</th>\n' +
                    '            <th>申请调换房间号</th>\n' +
                    '            <th>申请调换床号</th>\n' +
                    '            <th>处理结果</th>\n' +
                    '        </tr>';

                //遍历数组
                for (var i = 0; i < data.length; i++) {
                    if (i%2==0){
                        str += '<tr class="active">\n' +
                            '            <td>'+data[i].sid+'</td>\n' +
                            '            <td>'+data[i].old_building+'</td>\n' +
                            '            <td>'+data[i].old_room+'</td>\n' +
                            '            <td>'+data[i].old_bed+'</td>\n' +
                            '            <td>'+data[i].new_room+'</td>\n' +
                            '            <td>'+data[i].new_bed+'</td>\n' +
                            '            <td>\n' +
                            '                <a href="tea/disposeApply?sid='+data[i].sid+'&room='+data[i].new_room+'&bed='+data[i].new_bed+'&flag=1">同意</a>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                            '                <a href="tea/disposeApply?sid='+data[i].sid+'&room='+data[i].new_room+'&bed='+data[i].new_bed+'&flag=0">拒绝</a>\n' +
                            '            </td>\n' +
                            '        </tr>';

                    }else{
                        str += '<tr class="info">\n' +
                            '            <td>'+data[i].sid+'</td>\n' +
                            '            <td>'+data[i].old_building+'</td>\n' +
                            '            <td>'+data[i].old_room+'</td>\n' +
                            '            <td>'+data[i].old_bed+'</td>\n' +
                            '            <td>'+data[i].new_room+'</td>\n' +
                            '            <td>'+data[i].new_bed+'</td>\n' +
                            '            <td>\n' +
                            '                <a href="tea/disposeApply?sid='+data[i].sid+'&room='+data[i].new_room+'&bed='+data[i].new_bed+'&flag=1">同意</a>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                            '                <a href="tea/disposeApply?sid='+data[i].sid+'&room='+data[i].new_room+'&bed='+data[i].new_bed+'&flag=0">拒绝</a>\n' +
                            '            </td>\n' +
                            '        </tr>';
                    }
                }
                //将拼接好的字符串放入表格标签体中
                $("#tab_three_table").html(str);
            },"json");

            //请查询该楼栋的某房间中的某床位是否已有人
            $("#query_if_exist").submit(function () {
                if (checkBuilding() && checkRoom() && checkBed()){
                    //各个表单项满足正则后发生ajax请求 查询该床位是否有人
                    $.get("tea/queryBed",$("#query_if_exist").serialize(),function (data) {
                        if (data){
                            //该床位已经有人了
                            alert("该床位已经有人了");
                        }else{
                            alert("该床位目前没人");
                        }
                    },"json");
                }
                return false;
            });

            //楼栋号
            $("#building").blur(function () {
                if (checkBuilding()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //房间号
            $("#room").blur(function () {
                if (checkRoom()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //床号
            $("#bed").blur(function () {
                if (checkBed()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });

        });
    </script>
</head>
<body>
    <!-- 查询该床位是否已有人 -->
    <h2 style="margin-left: 50px">请查询该楼栋的某房间中的某床位是否已有人</h2>
    <form id="query_if_exist">
        <span ><label for="building" class="td_left">楼栋号</label></span>
        <span><input type="text" name="building" id="building" placeholder="请输入楼栋号"></span>
        <span ><label for="room" class="td_left">房间号</label></span>
        <span><input type="text" name="room" id="room" placeholder="请输入房间号"></span>
        <span ><label for="bed" class="td_left">床号</label></span>
        <span><input type="text" name="bed" id="bed" placeholder="请输入床号"></span>
        <span><input type="submit" value="确定" style="margin-left: 50px;width: 70px" class="btn btn-info"></span>
    </form>
    <!-- 学生调换宿舍的申请 -->
    <table class="table table-hover" id="tab_three_table">
<!--        <tr class="info">-->
<!--            <th>学号</th>-->
<!--            <th>楼栋号</th>-->
<!--            <th>房间号</th>-->
<!--            <th>床号</th>-->
<!--            <th>申请调换房间号</th>-->
<!--            <th>申请调换床号</th>-->
<!--            <th>处理结果</th>-->
<!--        </tr>-->
<!--        <tr class="active">-->
<!--            <td>XXXXXXXXXXXXXXXX</td>-->
<!--            <td>61</td>-->
<!--            <td>521</td>-->
<!--            <td>3</td>-->
<!--            <td>522</td>-->
<!--            <td>1</td>-->
<!--            <td>-->
<!--                <a href="#">同意</a>&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <a href="#">拒绝</a>-->
<!--            </td>-->
<!--        </tr>-->
<!--        <tr class="info">-->
<!--            <td>XXXXXXXXXXXXXXXX</td>-->
<!--            <td>61</td>-->
<!--            <td>521</td>-->
<!--            <td>3</td>-->
<!--            <td>522</td>-->
<!--            <td>1</td>-->
<!--            <td>-->
<!--                <a href="#">同意</a>&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <a href="#">拒绝</a>-->
<!--            </td>-->
<!--        </tr>-->
    </table>
    <div style="float: right;margin-right: 50px">
        <a href="tea_main_page.html" class="btn btn-info">返回主界面</a>
    </div>
</body>
</html>